@use './variables' as *;

// 响应式混入
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (min-width: $screen-xs) { @content; }
  }
  @if $breakpoint == sm {
    @media (min-width: $screen-sm) { @content; }
  }
  @if $breakpoint == md {
    @media (min-width: $screen-md) { @content; }
  }
  @if $breakpoint == lg {
    @media (min-width: $screen-lg) { @content; }
  }
  @if $breakpoint == xl {
    @media (min-width: $screen-xl) { @content; }
  }
  @if $breakpoint == xxl {
    @media (min-width: $screen-xxl) { @content; }
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 文本省略号
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本省略号
@mixin text-ellipsis-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 居中对齐
@mixin center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Flex居中
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 按钮重置
@mixin button-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  
  &:focus {
    outline: none;
  }
}

// 输入框重置
@mixin input-reset {
  border: none;
  outline: none;
  background: none;
  padding: 0;
  margin: 0;
  
  &:focus {
    outline: none;
  }
}

// 阴影混入
@mixin box-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: $shadow-1;
  } @else if $level == 2 {
    box-shadow: $shadow-2;
  } @else if $level == 3 {
    box-shadow: $shadow-3;
  } @else if $level == 4 {
    box-shadow: $shadow-4;
  }
}

// 过渡动画
@mixin transition($property: all, $duration: $animation-duration-base, $timing: $ease-in-out) {
  transition: $property $duration $timing;
}

// 渐变背景
@mixin gradient-bg($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 圆角
@mixin border-radius($radius: $border-radius-base) {
  border-radius: $radius;
}

// 字体大小和行高
@mixin font-size($size, $line-height: null) {
  font-size: $size;
  @if $line-height {
    line-height: $line-height;
  }
}

// 绝对定位
@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;
  @if $top { top: $top; }
  @if $right { right: $right; }
  @if $bottom { bottom: $bottom; }
  @if $left { left: $left; }
}

// 相对定位
@mixin relative($top: null, $right: null, $bottom: null, $left: null) {
  position: relative;
  @if $top { top: $top; }
  @if $right { right: $right; }
  @if $bottom { bottom: $bottom; }
  @if $left { left: $left; }
}

// 固定定位
@mixin fixed($top: null, $right: null, $bottom: null, $left: null) {
  position: fixed;
  @if $top { top: $top; }
  @if $right { right: $right; }
  @if $bottom { bottom: $bottom; }
  @if $left { left: $left; }
}

// 宽高
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// 最小宽高
@mixin min-size($min-width, $min-height: $min-width) {
  min-width: $min-width;
  min-height: $min-height;
}

// 最大宽高
@mixin max-size($max-width, $max-height: $max-width) {
  max-width: $max-width;
  max-height: $max-height;
}

// 隐藏文本
@mixin hide-text {
  text-indent: -9999px;
  overflow: hidden;
}

// 可视化隐藏（保留屏幕阅读器可访问性）
@mixin visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

// 滚动条样式
@mixin scrollbar($width: 6px, $track-color: $bg-secondary, $thumb-color: $border-color) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;
    
    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}

// 加载动画
@mixin loading-spin($size: 20px, $border-width: 2px, $color: $primary-color) {
  width: $size;
  height: $size;
  border: $border-width solid transparent;
  border-top-color: $color;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 脉冲动画
@mixin pulse($color: $primary-color, $duration: 2s) {
  animation: pulse-#{unique-id()} $duration infinite;
  
  @keyframes pulse-#{unique-id()} {
    0% {
      box-shadow: 0 0 0 0 rgba($color, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba($color, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

// 淡入动画
@mixin fade-in($duration: $animation-duration-base, $delay: 0s) {
  opacity: 0;
  animation: fade-in $duration $ease-out $delay forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

// 滑入动画
@mixin slide-in($direction: up, $distance: 20px, $duration: $animation-duration-base) {
  @if $direction == up {
    transform: translateY($distance);
  } @else if $direction == down {
    transform: translateY(-$distance);
  } @else if $direction == left {
    transform: translateX($distance);
  } @else if $direction == right {
    transform: translateX(-$distance);
  }
  
  animation: slide-in-#{$direction} $duration $ease-out forwards;
}

@keyframes slide-in-up {
  to { transform: translateY(0); }
}

@keyframes slide-in-down {
  to { transform: translateY(0); }
}

@keyframes slide-in-left {
  to { transform: translateX(0); }
}

@keyframes slide-in-right {
  to { transform: translateX(0); }
} 